<template>
  <view>
    <view class="submit">
      <view class="submit-chat">
        <!-- 文本框 -->
        <textarea
          :adjust-position="false"
          :show-confirm-bar="false"
          class="chat-send btn"
          @input="inputs"
          v-model="msg"
          @focus="focus"
          @blur="blur"
          maxlength="-1"
          :focus="isInputFocus"
          :auto-height="true"
        />
        <view
          class="bt-send flex_center_align"
          v-if="msg != ''"
          @click="sendMessage()"
          >发送</view
        >

        <!-- 表情包图标 -->
        <view class="bt-img" @tap="showEmoji" v-if="msg == ''">
          <image src="/static/img/exchange/emoji.png"></image>
        </view>

        <!-- 更多图标 -->
        <view class="bt-img" @tap="more" v-if="msg == ''">
          <image src="/static/img/exchange/more.png"></image>
        </view>
      </view>

      <!-- 键盘上被引用的消息展示 -->
      <view class="abc">
        <view class="quoteMsg flex" v-if="quoteMsg != null">
          <view class="msg-text ellipsis2">{{ quoteMsg.message }} </view>
          <u-icon
            name="close-circle-fill"
            @click="
              quoteMsg = null;
              isInputFocus = false;
            "
          ></u-icon>
        </view>
      </view>

      <!-- 表情包 -->
      <view class="emoji" :class="{ displaynone: !isemoji }">
        <emoji @emotion="emotion" :height="220"></emoji>
      </view>

      <!-- 更多 -->
      <view class="more" :class="{ displaynone: !isMore }">
        <view class="more-list" @tap="onClickSend('album')">
          <image src="/static/img/exchange/pic.png"></image>
          <view class="more-list-title">图片</view>
        </view>
        <view class="more-list" @tap="onClickSend('camera')">
          <image src="/static/img/exchange/camera.png"></image>
          <view class="more-list-title">拍照</view>
        </view>
        <view class="more-list" @tap="showOfen = true" v-if="!showOftenMsg">
          <image src="/static/img/exchange/offenMsg.png"></image>
          <view class="more-list-title">常用语</view>
        </view>
      </view>
    </view>
    <u-popup
      :show="showOfen"
      mode="center"
      :closeOnClickOverlay="true"
      :showConfirmButton="false"
      width="300px"
      @close="close()"
      overlayOpacity="0"
    >
      <view class="offen-box">
        <view class="offen-title flex_center_align c333">常用语</view>
        <scroll-view class="offten-scroll" scroll-y="true">
          <view
            class="offen-item ellipsis1"
            v-for="(item, index) in oftenList"
            :key="index"
            @click="chooseOfftenMsg(item)"
            >{{ item.title }}</view
          >
        </scroll-view>
      </view>
    </u-popup>

    <!-- 授权上传图片的弹窗 -->
    <yk-authpup
      ref="authpup"
      type="top"
      @changeAuth="changeAuth"
      :permissionID="permissionID"
    ></yk-authpup>
  </view>
</template>

<script>
import { httpUpload } from "@/utils/request.js";
import emoji from "./components/emoji.vue";
import ykAuthpup from "@/components/yk-authpup/yk-authpup";

export default {
  components: {
    emoji,
    ykAuthpup,
  },
  props: {
    oftenList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showOftenMsg: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },

  data() {
    return {
      isMore: false,
      isemoji: false,
      msg: "",
      imgList: [], //图片地址
      showOfen: false,
      quoteMsg: null, //被引用的消息对象
      isInputFocus: false, //自动聚焦
      sourceType: "",
      permissionID: "",
    };
  },
  onLoad() {},

  mounted() {
    console.log("是否显示常用语", this.showOftenMsg, this.oftenList);
  },
  watch: {},
  methods: {
    /**
     * @param {Object} e 被引用的消息对象
     */
    quoteMessage(e) {
      console.log("被引用的消息对象", e);
      this.isInputFocus = true;
      this.quoteMsg = e;
    },
    // 表情
    showEmoji() {
      this.isemoji = !this.isemoji;
      //切换的时候关闭其功能
      this.isMore = false;
      //切换高度
      setTimeout(() => {
        this.getElementHeight();
      }, 10);
    },
    //接收表情
    emotion(e) {
      this.$emit("clickSend", e.url, 111);
      // this.isemoji = false
      this.quoteMsg = null;
    },

    chooseOfftenMsg(item) {
      this.msg = item.title;
      this.showOfen = false;
    },
    close() {
      this.showOfen = false;
    },

    sendMessage() {
      this.$emit("clickSend", this.msg, 1, this.quoteMsg);
      this.msg = "";
      this.quoteMsg = null;
    },
    //获取高度方法
    getElementHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".submit")
        .boundingClientRect((data) => {
          this.$emit("heights", data.height);
        })
        .exec();
    },

    inputs(e) {
      this.$emit("onInput");
    },
    hideMore() {
      this.isMore = false;
      this.isemoji = false;
    },
    // 输入框聚焦
    focus(e) {
      this.$emit("changeBottomVal", e.detail.height);
      //关闭其他项
      this.isMore = false;
      this.isemoji = false;
      setTimeout(() => {
        this.getElementHeight();
      }, 10);
    },

    blur() {
      this.$emit("changeBottomVal", 0);
    },
    //更多功能
    more() {
      this.isMore = !this.isMore;
      this.isemoji = false;
      this.$emit("moreBtn");
      setTimeout(() => {
        this.getElementHeight();
      }, 10);
    },
    //图片发送
    sendImg(e) {
      let count = 9;
      if (e == "album") {
        //相册
        count = 9;
      } else {
        //拍照
        count = 1;
      }
      uni.chooseImage({
        count: count,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: [e], //从相册选择
        success: (res) => {
          console.log(res);
          if (res.tempFilePaths.length > 0) {
            for (let i = 0; i < res.tempFilePaths.length; i++) {
              this.send(res.tempFilePaths[i]);
            }
          }
        },
      });
    },

    onClickSend(e) {
      this.sourceType = e;
      if (e == "album") {
        this.openAuth("WRITE_EXTERNAL_STORAGE");
      } else if (e == "camera") {
        this.openAuth("CAMERA");
      }
    },

    //上传图片
    send(img) {
      httpUpload({
        url: "/api/common/upload",
        method: "POST",
        params: img,
      })
        .then((res) => {
          let res1 = JSON.parse(res)
          if (res1.code == 1) {
            console.log("聊天框上传图片成功", res1.data.fullurl);
            this.$emit("clickSend", res1.data.fullurl, 11);
            this.quoteMsg = null;
          } else {
            this.$tools.showToast(res1.msg);
          }
        })
        .catch((err) => {
          console.log("错误回调", err);
        });
    },

    openAuth(permissionID) {
      let sysTemInfo = uni.getSystemInfoSync().brand; //获取手机品牌
      if (sysTemInfo == "huawei") {
        this.permissionID = permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
        setTimeout(() => {
          this.$refs["authpup"].open();
        }, 500);
      } else {
        this.sendImg(this.sourceType);
      }
    },

    //用户授权权限后的回调
    changeAuth() {
      //这里是权限通过后执行自己的代码逻辑
      console.log("权限已授权，可执行自己的代码逻辑了");
      this.sendImg(this.sourceType);
    },
  },
};
</script>

<style lang="scss" scoped>
.submit {
  background-color: #f6f6f6;
}

.displaynone {
  display: none;
}

.submit-chat {
  width: 100%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 14rpx 14rpx;

  image {
    width: 56rpx;
    height: 56rpx;
    margin: 0 10rpx;
    flex: auto;
  }

  .btn {
    flex: auto;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    color: #272832;
    margin: 0 10rpx;
  }

  .chat-send {
    line-height: 36rpx;
  }

  .bt-send {
    position: relative;
    left: 8rpx;
    bottom: 4rpx;
    width: 120rpx;
    height: 70rpx;
    background-color: #06c25f;
    color: #fff;
    border-radius: 10rpx;
  }
}

.quoteMsg {
  margin-left: 30rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #999;
  width: 73%;
  max-height: 72rpx;
  background-color: #e8e8e8;
  border-radius: 10rpx;

  .msg-text {
    margin-right: 70rpx;
    padding: 0rpx 20rpx;
    width: 400rpx;
    max-height: 70rpx;
  }
}

.emoji {
  width: 100%;
  height: 460rpx;
  background: rgba(236, 237, 238, 1);
  box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
}

.more {
  width: 100%;
  height: 436rpx;
  background: rgba(236, 237, 238, 1);
  box-shadow: 0px 11rpx 0px 0px rgba(0, 0, 0, 0.1);
  bottom: env(safe-area-inset-bottom);
  padding: 8rpx 20rpx;
  box-sizing: border-box;

  .more-list {
    width: 25%;
    text-align: center;
    float: left;
    padding-top: 32rpx;

    image {
      width: 86rpx;
      height: 86rpx;
      padding: 24rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 24rpx;
    }

    .more-list-title {
      font-size: 24rpx;
      color: rgba(39, 40, 50, 0.5);
      line-height: 34rpx;
    }
  }
}

.offen-box {
  height: 676rpx;
  width: 530rpx;

  .offen-title {
    margin-bottom: 20rpx;
    font-size: 36rpx;
    width: 100%;
    height: 100rpx;
    border-bottom: 1rpx solid #d8d8d8;
  }

  .offen-item {
    margin: 30rpx 0;
    padding: 0 20rpx;
    height: 50rpx;
    line-height: 50rpx;
  }
}

/deep/.u-popup__content {
  border-radius: 20rpx;
  margin-top: 300rpx;
  margin-left: 200rpx;
}

/deep/.uni-scroll-view-content {
  height: 480rpx;
}

/deep/ ::-webkit-scrollbar {
  display: block;
  width: 8rpx !important;
  height: 10rpx !important;
  -webkit-appearance: auto !important;
  overflow: auto !important;
}

/deep/ ::-webkit-scrollbar-thumb {
  border-radius: 10rpx !important;
  box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
  background-color: #f1f1f1 !important;
}
</style>
